import React, { memo, useState, useEffect } from 'react';
import { RouterProvider } from 'react-router-dom';

import router from './router/routerConfig.tsx';

const Header = React.lazy(() => import('@/components/common/header/index.tsx'));
const Footer = React.lazy(() => import('@/components/common/footer/index.tsx'));

let home = memo(() => {
  let [isTop, setIsTop] = useState(false);
  useEffect(() => {
    let JudgeisTop = () => {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

      if (scrollTop == 0) {
        setTimeout(() => {
          setIsTop(true);
        }, 200);
        return;
      }

      setIsTop(false);
    };

    document.addEventListener('scroll', JudgeisTop);

    return () => {
      document.removeEventListener('scroll', JudgeisTop);
    };
  }, []);
  return (
    <>
      <div className="root relative !bg-[#e7e7e2]">
        <div className={`h-[60px] leading-[60px]   underline bg-[#e7e7e2] text-center`}>
          <p className="cursor-pointer">hellow orld</p>
        </div>
        <div className={`mt-[-60px] ${isTop ? 'translate-y-[60px]' : ''} transition-all ease-linear duration-[200ms]`}>
          <Header isTop={isTop}></Header>
          <div className="cont bg-white">
            <RouterProvider router={router} />
          </div>
          <Footer></Footer>
        </div>
      </div>
    </>
  );
});

export default home;
